<template>
    <div class="career-body">

        <FullHeadImg backImage="career/head.png">
        </FullHeadImg>

        <section class="body-m">
            Every individual possesses unique talents and aspirations, and we are dedicated to fostering a work
            environment for our people to thrive. Joining our team means becoming part of a dynamic and inclusive
            community that values collaboration, innovation, and personal growth. Whether you are just starting your
            career or seeking new challenges, we invite you to explore our available positions and embark on an exciting
            journey with us.
        </section>

        <h2 class="body-m">
            Open Positions
        </h2>

        <section class="carrer-collapse body-m">
            <el-collapse v-model="state.activeName" accordion>
                <el-collapse-item v-for="(item, idx) in careerConfig" :title='item.title' :name="item.title">
                    <div class="career-job" v-for="(subItem, idx) in item.contents" :key="idx">
                        <p class="job-title">
                            {{ subItem.title }}
                        </p>
                        <p class="job-desc" v-for="(jobDesc, idx) in subItem.desc" :key="idx" v-if="subItem.desc">
                            {{ jobDesc.content }}
                        </p>
                        <ul class="job-list" v-if="subItem.items">
                            <li class="job-list-item" v-for="(listItem, idx) in subItem.items" :key="idx">
                                <p>{{ listItem }}</p>
                            </li>
                        </ul>

                        <p class="job-foot" v-if="subItem.footer"> {{ subItem.footer }} </p>
                    </div>

                    <div class="career-job">
                        <p class="job-title">
                            How to apply
                        </p>
                        <p class="job-desc">
                            For those who are interested, please send your CV to: <a
                                :href="`mailto:${appConfig.emailTo}`"> {{
                                appConfig.emailTo }}</a>
                        </p>
                    </div>

                </el-collapse-item>
            </el-collapse>
        </section>

        <section></section>
    </div>
</template>

<script setup lang="ts" name="CareerView">
import { reactive } from 'vue';
import careerConfig from '@/utils/careerConfig';
import appConfig from '@/utils/appConfig';

const state = reactive({
    activeName: ''
})

</script>

<style scoped lang="scss">
.career-body {
    display: flex;
    flex-direction: column;
    gap: 4rem;
}

.carrer-collapse {
    width: 100%;

    .career-job {
        display: flex;
        flex-direction: column;
        // gap: 1rem;
        margin-top: 1rem;

        .job-title {
            font-size: 1.2rem;
            font-weight: 700;
        }

        .job-desc {
            font-size: 1rem;
            padding-bottom: 1rem;
        }

        .job-list {
            list-style-type: disc;
            list-style-position: outside;
            padding-left: 2rem;

            .job-list-item {
                // padding-left: 1rem;
                font-size: 1rem;
                padding-bottom: 5px;

                p {
                    display: inline;
                    text-indent: 0.5rem;
                }
            }
        }

        .job-foot {
            font-style: italic;
            font-size: 1rem;
            padding-top: 1rem;
        }
    }
}

@media (max-width: 650px) {
    .career-body {
        gap: 2rem;
    }
}
</style>